<template>
  <div class="container">
    <div class="card" style="margin: 10px 0">
      <el-input placeholder="商品名/类别" style="width: 300px;margin: 0 10px"></el-input>
      <el-button type="primary" size="large">查询</el-button>
      <el-button type="success" size="large" style="position: absolute;right: 150px"
                 @click="data.centerDialogVisible=true">商品上新
      </el-button>

    </div>
    <div class="card" style="margin: 10px 0">
      <el-table :data="data.tableData" style="width: 100%;height: 88vh;">
        <el-table-column prop="title" label="商品名"></el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
        <el-table-column prop="stock" label="库存"></el-table-column>
        <el-table-column prop="image" label="图片">
          <template #default="scope">
            <img :src="scope.row.image" alt="图片" style="width: 30%;">
          </template>
        </el-table-column>
        <el-table-column label="类目">
          <template #default="scope">
            <el-icon size="large" type="primary">
              <component :is="getCategoryIcon(scope.row.cid)"/>
            </el-icon>
            {{ getCategoryName(scope.row.cid) }}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template #default="scope">
            <span :class="getStatusClass(scope.row.status)"> {{ getStatusName(scope.row.status) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" @click="updateItem(scope.row)">修改/查看详细</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="position: absolute;bottom: 0;">
        <el-pagination
            v-model:current-page="data.currentPage"
            v-model:page-size="data.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="data.total"
            :page-sizes="[10, 20, 50, 100]"
            background
            @size-change="load"
            @current-change="load"
        />
      </div>
    </div>
    <div>
      <el-dialog
          v-model="data.centerDialogVisible"
          title="上架产品！"
          width="500"
          align-center
      >
        <div>
          <el-form :model="data.addItem" :rules="data.rules" ref="formRef" label-width="auto" style="max-width: 600px">
            <el-form-item label="商品预览图" prop="image">
              <el-upload
                  class="avatar-uploader"
                  action="http://localhost:8080/files/upload/itemPreview"
                  :show-file-list="false"
                  :on-success="imageUploadSucess"
              >
                <img v-if="data.addItem.image" :src="data.addItem.image" alt="商品预览图" class="avatar"/>
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus/>
                </el-icon>
              </el-upload>
            </el-form-item>
            <el-form-item prop="title" label="商品名称">
              <el-input v-model="data.addItem.title" placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item prop="price" label="价格">
              <el-input type="number" v-model="data.addItem.price" placeholder="请输入商品价格"></el-input>
            </el-form-item>
            <el-form-item prop="stock" label="库存">
              <el-input type="number" v-model="data.addItem.stock" placeholder="请输入商品库存"></el-input>
            </el-form-item>
            <el-form-item prop="barcode" label="条码">
              <el-input v-model="data.addItem.barcode" placeholder="请输入商品条码"></el-input>
            </el-form-item>
            <el-form-item prop="cid" label="类目">
              <el-select v-model="data.addItem.cid" placeholder="请选择商品类型" style="width: 240px">
                <el-option-group>
                  <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-option-group>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="data.centerDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="addItem">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
    <div>
      <!--    产品更新-->
      <el-dialog
          v-model="data.updateDialogVisible"
          title="更新产品！"
          width="500"
          align-center
      >
        <div>
          <el-form :model="data.addItem" :rules="data.rules" ref="formRef" label-width="auto" style="max-width: 600px">
            <el-form-item label="商品预览图" prop="image">
              <el-upload
                  class="avatar-uploader"
                  action="http://localhost:8080/files/upload/itemPreview"
                  :show-file-list="false"
                  :on-success="imageUploadSucess"
              >
                <img v-if="data.addItem.image" :src="data.addItem.image" alt="商品预览图" class="avatar"/>
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus/>
                </el-icon>
              </el-upload>
            </el-form-item>
            <el-form-item prop="title" label="商品名称">
              <el-input v-model="data.addItem.title" placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item prop="sellPoint" label="关键词">
              <el-input v-model="data.addItem.sellPoint" placeholder="请输入商品热点"></el-input>
            </el-form-item>
            <el-form-item prop="price" label="价格">
              <el-input type="number" v-model="data.addItem.price" placeholder="请输入商品价格"></el-input>
            </el-form-item>
            <el-form-item prop="stock" label="库存">
              <el-input type="number" v-model="data.addItem.stock" placeholder="请输入商品库存"></el-input>
            </el-form-item>
            <el-form-item prop="barcode" label="条码">
              <el-input v-model="data.addItem.barcode" placeholder="请输入商品条码"></el-input>
            </el-form-item>
            <el-form-item prop="cid" label="类目">
              <el-select v-model="data.addItem.cid" placeholder="请选择商品类型" style="width: 240px">
                <el-option-group>
                  <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-option-group>
              </el-select>
            </el-form-item>
            <el-form-item prop="status" label="产品状态管理">
              <el-select v-model="data.addItem.status">
                <el-option value=1 label="在售"></el-option>
                <el-option value=0 label="下架"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="data.updateDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="updateItemWeb">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>

</template>
<script setup>
import {
  Cellphone,
  EditPen,
  Monitor,
  Dish,
  Goods,
  GoodsFilled, Plus
} from "@element-plus/icons-vue"
import {reactive, ref} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";

const formRef = ref()
const data = reactive({
  tableData: [],
  currentPage: 1,
  pageSize: 8,
  total: 0,
  search_info: '',
  business: JSON.parse(localStorage.getItem("information")),
  centerDialogVisible: false,
  addItem: {},
  rules: {
    title: [{required: true, message: "请输入商品名", trigger: "blur"}],
    price: [{required: true, message: "请输入商品价格", trigger: "blur"}],
    stock: [{required: true, message: "请选择商品库存", trigger: "blur"}],
    image: [{required: true, message: "请商城商品预览图", trigger: "blur"}],
    barcode: [{required: true, message: "请选择商品条码", trigger: "blur"}],
    cid: [{required: true, message: "请选择商品类目", trigger: "blur"}],
  },
})

const load = () => {
  request.get("item/selectPage_id", {
    params: {
      currentPage: data.currentPage,
      pageSize: data.pageSize,
      search_info: data.search_info,
      businessId: data.business.businessId
    }
  }).then((res) => {
    data.total = res.data.total;
    data.tableData = res.data.list;
  })

}


const addItem = () => {
  console.log(data.addItem);
  formRef.value.validate((valid) => {
    if (valid) {
      data.addItem.price = parseFloat(data.addItem.price);
      data.addItem.stock = parseInt(data.addItem.stock);
      data.addItem.businessId = data.business.businessId;
      data.addItem.created = getDateTime();
      data.addItem.status = 1;
      data.addItem.updated = getDateTime();
      data.addItem.sellPoint = '';
      request.post("item/insert", data.addItem).then(res => {
        if (res.code === 200) {
          data.centerDialogVisible = false;
          ElMessage.success("商品上新成功")
        } else {
          ElMessage.error(res.msg);
        }

      })
    }
  })


}


const updateItem = (row) => {
  data.addItem = row;
  data.updateDialogVisible = true;
}
const updateItemWeb = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      request.post("item/update", data.addItem).then(res => {
        if (res.code === 200) {
          data.updateDialogVisible = false;
          ElMessage.success("商品更新成功")
        } else {
          ElMessage.error(res.msg);
        }

      })
    }
  })
}

load();
const imageUploadSucess = (res) => {
  data.addItem.image = res.data;
}
const getDateTime = () => {
// 获取当前时间
  const now = new Date();

// 格式化日期和时间
  const year = now.getFullYear(); // 年
  const month = String(now.getMonth() + 1).padStart(2, '0'); // 月（+1是因为getMonth()从0开始）
  const day = String(now.getDate()).padStart(2, '0'); // 日
  const hours = String(now.getHours()).padStart(2, '0'); // 小时
  const minutes = String(now.getMinutes()).padStart(2, '0'); // 分钟
  const seconds = String(now.getSeconds()).padStart(2, '0'); // 秒

// 拼接成目标格式
  const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  return formattedDate;
}
const CategoryMap = {
  1: "文具",
  2: "手机",
  3: "电脑",
  4: "食物",
  5: "化妆品",
  6: "服饰"
}
const options = [
  {
    value: 1,
    label: '文具',
  },
  {
    value: 2,
    label: '手机',
  },
  {
    value: 3,
    label: '电脑',
  },
  {
    value: 4,
    label: '食物',
  },
  {
    value: 5,
    label: '化妆品',
  },
  {
    value: 6,
    label: '服饰',
  }
];
const StatusMap = {
  1: "在售",
  2: "下架",
}
const StatusClassMap = {
  1: "on_cell",
  2: "down_cell",
}
const CategoryIconMap = {
  2: "Cellphone",
  1: "EditPen",
  3: "Monitor",
  4: "Dish",
  5: "Goods",
  6: "GoodsFilled"

}
const getCategoryName = (cid) => {
  return CategoryMap[cid] || "其他";
}

const getStatusName = (cid) => {
  return StatusMap[cid] || "未知";
}
const getStatusClass = (cid) => {
  return StatusClassMap[cid] || "";
}
const getCategoryIcon = (cid) => {
  return CategoryIconMap[cid] || "";
}

</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: rgba(7, 1, 1, 0);
}
</style>
<style scoped>
.avatar-uploader .avatar {
  width: 128px;
  height: 128px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>


